<template>
  <div class="waybill-box">
    <nav-bar :back="false" title="运单" :whiteStyle="true"></nav-bar>
    <!-- 搜索栏 -->
    <form action="/">
      <van-search v-model="activeData.searchVal" show-action placeholder="装卸货地址/运单号" @search="onSearch">
        <template #left-icon>
          <img src="../../assets/image/waybill/search.png" alt="" class="magnifier" />
        </template>
        <template #action>
          <div @click="onSearch" class="search-btn">搜索</div>
        </template>
      </van-search>
    </form>
    <van-tabs
      v-model:active="activeData.active"
      @click-tab="onTabClick"
      swipeable
      sticky
      offset-top="86px"
      class="tab-box"
      background="#fcfcfc"
    >
      <van-tab v-for="tabItem in BillTabsEm" :key="tabItem.value" :name="tabItem.value" :title="tabItem.description">
        <div v-if="isFirstRequest">
          <van-skeleton class="skeleton" title :row="5" v-for="item in [1, 2, 3, 4, 5]" :key="item" :loading="true" />
        </div>
        <van-pull-refresh v-model="initData.isLoading" success-text="刷新成功" @refresh="onRefresh">
          <van-list
            v-model:loading="initData.loading"
            :finished="initData.finished"
            finished-text="没有更多了"
            v-model:error="initData.error"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
            :immediate-check="false"
            v-show="initData.list.length"
          >
            <div class="order" v-for="(item, i) in initData.list" :key="i" :title="item">
              <div>
                <van-row justify="space-between" class="waybill-number">
                  <van-col class="bill__order__time">
                    {{ item.billOrderNo }}
                    <span class="copyNo" :data-clipboard-text="item.billOrderNo.slice(5)" @click="handleCopy">
                      复制
                    </span>
                  </van-col>
                  <van-col>
                    <span :style="{ color: item.status === BillTabsEm.ALL.value ? '#575c72' : '#575c72' }">
                      {{ item.billOrderStatusName }}
                    </span>
                  </van-col>
                </van-row>
                <hr color="#EDEDED" size="1" />
                <van-row justify="space-between" @click="handleDetail(item)">
                  <van-col>
                    {{ item.billOrderTime }}
                  </van-col>
                  <van-col>
                    <div class="sec__status" v-show="item.billOrderSecStatusName">
                      <span class="sec__status__color" :style="{ backgroundColor: `${item.secStatusColor}` }"></span>
                      <span class="src__Status__text">{{ item.billOrderSecStatusName }}</span>
                    </div>
                  </van-col>
                </van-row>
                <van-row class="order-address" @click="handleDetail(item)">
                  <van-col span="2">
                    <img src="../../assets/image/waybill/direction.png" alt="" />
                  </van-col>
                  <van-col span="22" class="list" @click="handleDetail(item)">
                    <div class="area">{{ item.sendProvinceName }}{{ item.sendCityName }}{{ item.sendCountyName }}</div>
                    <div class="describe">
                      <div>
                        <span>{{ item.goodsTypeDesc }}&nbsp;/&nbsp;</span>
                        <span v-if="item.goodsName">{{ item.goodsName }}&nbsp;/&nbsp;</span>
                        <span>
                          {{
                            item.dataType === Number(DataTypeEm.ORDER.value)
                              ? `${item.quality}吨`
                              : item.settleType === SettleTypeEm.Trip.value
                              ? `${item.quality}吨`
                              : `${item.carryQuality}吨`
                          }}
                        </span>
                      </div>
                      <div>
                        {{ item.settleType === SettleTypeEm.Trip.value ? item.price + '元/趟' : item.price + '元/吨' }}
                      </div>
                    </div>
                    <div class="area">
                      {{ item.receiveProvinceName }}{{ item.receiveCityName }}{{ item.receiveCountyName }}
                    </div>
                  </van-col>
                </van-row>
                <div
                  class="goods__num"
                  v-if="item.billOrderStatus === BillTabsEm.WAIT_RE.value && item.orderType === 1"
                >
                  <div class="goods__title">货源余量:</div>
                  <div class="goods_speed">
                    <div
                      class="current__Speed"
                      :style="{
                        width:
                          item.remainAllot && item.totalAllot ? `${(item.remainAllot / item.totalAllot) * 100}%` : 0
                      }"
                    ></div>
                  </div>
                  <div class="goods__memo">
                    {{ item.remainAllot || 0 }}/{{ item.totalAllot || 0
                    }}{{ item.settleType === SettleTypeEm.Trip.value ? '趟' : '吨' }}
                  </div>
                </div>
              </div>

              <van-row justify="end" class="order-handle">
                <template v-for="(itemBtn, index) in item.operationBtns" :key="index">
                  <van-button :type="itemBtn.type" size="small" :class="itemBtn.class || ''" @click="itemBtn.fn">
                    {{ itemBtn.title }}
                  </van-button>
                </template>
              </van-row>
            </div>
          </van-list>
          <div class="custom-image" v-show="!initData.list.length && isShowEmpty">
            <div class="box">
              <img src="../../assets/image/waybill/empty.png" alt="" />
              <div>暂无相关数据</div>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>

  <PhonePopup :isShow="isTelPhoneShow" :telNumber="driverMobile" @cancel_show="isTelPhoneShow = false" />
  <!-- <van-popup v-model:show="passwordPoppup" position="bottom">
    <div class="passwordPoppup">
      <div class="memo">请输入支付密码</div>
      <van-password-input :value="payPassword" :focused="true" />
      <van-number-keyboard
        v-model="payPassword"
        :show="true"
        @input="paymentOrder"
        maxlength="6"
        @blur="passwordPoppup = false"
      />
    </div>
  </van-popup> -->

  <van-popup v-model:show="passwordPoppup" position="bottom">
    <div class="passwordPoppup">
      <div class="memo">请输入支付密码</div>
      <van-password-input :value="payPassword" :focused="true" />
      <van-number-keyboard
        v-model="payPassword"
        :show="true"
        @input="onCommit"
        maxlength="6"
        @blur="passwordPoppup = false"
      />
    </div>
  </van-popup>
  <div v-loading="{ isLoading: customLoading }"></div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onActivated, onMounted, ref } from 'vue'
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import store from '@/store/index'
import PhonePopup from '@/components/PhonePopup.vue'
import { Toast } from 'vant'
import { BillTabsEm } from '@/store/enums'
import {
  LoadReceiptStatusEm,
  UnloadReceiptStatusEm,
  LoadRejectStatusEm,
  UnloadRejectStatusEm,
  BillOpearStatusEm,
  PointTypeEm,
  PayStatusEm,
  BillOpeartionEm,
  BillAllStatusEm,
  DataTypeEm,
  SettleTypeEm,
  CommentTypeEm
} from './utils/enums'
import useListOperation from './utils/useListOperation'
import { changeDateType } from './utils/common'
import { Skeleton } from 'vant'
interface InitState {
  list: any[]
  pageNo: number
  totalRows: number
  loading: boolean
  error: boolean
  isLoading: boolean
  finished: boolean
}

interface State {
  searchVal: string
  active: number
  waybillStaus: number | undefined
  commentType: number | undefined
}

export default defineComponent({
  name: 'Waybill',
  components: {
    NavBar,
    PhonePopup,
    'van-skeleton': Skeleton
  },
  setup() {
    const router = useRouter(),
      route = useRoute()

    const initData: InitState = {
      list: [],
      pageNo: 1,
      totalRows: 0,
      loading: false, //下拉加载
      error: false, //下拉加载失败
      isLoading: false, //上拉刷新
      finished: false //触底
    }

    const activeData: State = {
      searchVal: '', //搜索内容
      active: 0, //tab选中项
      waybillStaus: -1, //运单状态
      commentType: undefined //查评价
    }

    const state = reactive({
      initData: { ...initData },
      activeData: { ...activeData },
      isShowEmpty: false, //空页面
      isTelPhoneShow: false, //展示电话框
      driverMobile: '', //升级号码
      passwordPoppup: false, //展示密码框
      payPassword: '', //密码
      temporaryNo: '', //暂存被选中签收项id
      scroll: 0,
      wrapper: '' as any,
      customLoading: false //自定义loading
    })

    const passwordPoppup = ref<boolean>(false) // 支付弹窗
    const currentDetail = ref<any>({}) // 当前选中数据
    const isFirstRequest = ref(true)

    // 支付
    const onCommit = async (value: any): Promise<void> => {
      const current = currentDetail.value
      if (String(state.payPassword).length < 5) return
      const updateData: any = {
        billId: current.id, //	运单id		true
        password: state.payPassword + value //	支付密码
      }

      if (current.payStatus === PayStatusEm.NO_RECEIPT_PAY.value) {
        // 回单付
        updateData.amount = current.receiptAmount || 0
        updateData.type = BillOpeartionEm.CALLBACK.value
      } else if (current.payStatus === PayStatusEm.NO_MONTH_PAY.value) {
        updateData.amount = current.settleAmount || 0
        updateData.type = BillOpeartionEm.MOUNTH.value
      }
      const result = await store.dispatch('waybill/handleTransportBillConfirmCons', updateData)
      if (result) {
        Toast.success('操作成功')
        onSearch()
        passwordPoppup.value = false
        state.payPassword = ''
      }
    }

    // 重构订单数据
    const buildOrderData = (item: any, billCurrentObj: any): any => {
      item.dataType = Number(DataTypeEm.ORDER.value)
      item.billOrderStatus = item.orderStatus
      item.billOrderNo = '订单号: ' + item.orderNo
      return item
    }

    // 重构运单数据
    const buildTransData = (item: any, billCurrentObj: any): any => {
      item.dataType = DataTypeEm.TRANS.value
      if (billCurrentObj.value === item.status) {
        item.billOrderStatus = item.status
      }
      item.billOrderNo = '运单号: ' + item.billNo
    }

    // 待接单
    const waitingList = (detail: any): void => {
      //TODO 取货主发布订单的装货时间
      detail.billOrderTime = `装货时间: ${changeDateType(detail.shipTime, 'MMDD')}前`

      //TODO 当前状态
      detail.billOrderStatusName = '待接单'

      //TODO 操作按钮
      detail.operationBtns = [
        {
          title: '取消订单',
          class: 'cancel',
          type: 'default',
          fn: () => {
            handleCancelOrder(detail.id, () => {
              onSearch()
            })
          }
        }
      ]
      if (detail.pointType === PointTypeEm.FIND.value) {
        // 抢单类型
        // detail.operationBtns.push({
        //   title: `指派${detail.driverMobile ? '司机' : '承运商'}`,
        //   class: 'sure',
        //   type: 'primary',
        //   fn: () => {
        //     handleAssign(detail.id)
        //   }
        // })
      } else {
        // 派单 类型
        detail.operationBtns.push({
          title: `联系${detail.driverMobile ? '司机' : '承运商'}`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            goTelphone(detail)
          }
        })
      }
    }

    // 待装货
    const forTheLoading = (detail: any): void => {
      //TODO 取货主发布订单的装货时间
      detail.billOrderTime = `装货时间: ${changeDateType(detail.shipTime, 'MMDD')}前`
      detail.billOrderStatusName = '待装货'

      //TODO 操作按钮
      detail.operationBtns.push({
        title: '联系司机',

        class: 'sure_2',
        type: 'default',
        fn: () => {
          goTelphone(detail)
        }
      })

      if (
        detail.loadReceiptStatus === LoadReceiptStatusEm.ALREADY_UPLOAD.value &&
        detail.loadRejectStatus === LoadRejectStatusEm.NOT_REJECTED.value
      ) {
        // 已上传 并未驳回
        detail.billOrderSecStatusName = '待确认'
        detail.secStatusColor = '#FC9E29'

        // 操作按钮

        detail.operationBtns.push({
          title: '查看单据',
          class: 'sure',
          type: 'primary',
          fn: () => {
            onCheckBill(detail, BillOpeartionEm.BILL.value, String(BillOpearStatusEm.SHIPMENT.value))
          }
        })
      } else if (
        detail.loadReceiptStatus === LoadReceiptStatusEm.ALREADY_UPLOAD.value &&
        detail.loadRejectStatus === LoadRejectStatusEm.REJECT.value
      ) {
        // 驳回
        detail.billOrderSecStatusName = '已驳回'
        detail.secStatusColor = '#FF6459'
        detail.operationBtns.push({
          title: '查看单据',
          class: 'sure',
          type: 'primary',
          fn: () => {
            onCheckBill(detail, BillOpeartionEm.BILL.value, String(BillOpearStatusEm.SHIPMENT.value))
          }
        })
      }
    }

    // 运输中
    const inTransit = (detail: any): void => {
      //TODO 运输中状态取货主发布订单的卸货时间
      detail.billOrderTime = `卸货时间: ${changeDateType(detail.unloadTime, 'MMDD')}前`

      //TODO 当前状态
      detail.billOrderStatusName = '运输中'

      //TODO 操作按钮
      detail.operationBtns = [
        {
          title: '查看单据',
          class: 'sure_2',
          type: 'default',

          fn: () => {
            onCheckBill(detail, BillOpeartionEm.BILL.value, String(BillOpearStatusEm.SHIPMENT.value), 0, 0)
          }
        },
        {
          title: `查看轨迹`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            handleEnterMap(detail)
          }
        }
      ]
    }

    // 待签收
    const waitingSign = (detail: any): void => {
      //TODO 此处显示抵达时间（司机第一次上传卸货单据的时间）
      detail.billOrderTime = `抵达时间: ${changeDateType(detail.receiptTime, 'YYMMDD')}`
      detail.billOrderStatusName = '待签收'

      //TODO 操作按钮
      if (
        detail.unloadReceiptStatus === UnloadReceiptStatusEm.ALREADY_UPLOAD.value &&
        detail.unloadRejectStatus === UnloadRejectStatusEm.NOT_REJECTED.value
      ) {
        // 已上传卸货单据 并且未驳回

        detail.billOrderSecStatusName = '待确认'
        detail.secStatusColor = '#FC9E29'

        detail.operationBtns.push({
          title: `联系${detail.driverMobile ? '司机' : '承运商'}`,
          class: 'sure_2',
          type: 'default',
          fn: () => {
            goTelphone(detail)
          }
        })
        detail.operationBtns.push({
          title: `查看单据`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            onCheckBill(detail, BillOpeartionEm.SIGN.value, String(BillOpearStatusEm.UNLOADING.value))
          }
        })
      } else if (
        detail.unloadReceiptStatus === UnloadReceiptStatusEm.ALREADY_UPLOAD.value &&
        detail.unloadRejectStatus === UnloadRejectStatusEm.REJECT.value
      ) {
        // 已上传卸货单据 并且已驳回
        detail.billOrderSecStatusName = '已驳回'
        detail.secStatusColor = '#FF6459'
        detail.operationBtns.push({
          title: `联系${detail.driverMobile ? '司机' : '承运商'}`,
          class: 'sure_2',
          type: 'default',
          fn: () => {
            goTelphone(detail)
          }
        })
        detail.operationBtns.push({
          title: `查看单据`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            onCheckBill(detail, BillOpeartionEm.SIGN.value, String(BillOpearStatusEm.UNLOADING.value))
          }
        })
      }
    }

    // 待结算
    const waitingBilling = (detail: any): void => {
      //TODO 此处显示抵达时间（司机第一次上传卸货单据的时间）
      detail.billOrderTime = `抵达时间: ${changeDateType(detail.receiptTime, 'YYMMDD')}`
      //TODO 当前状态.
      detail.billOrderStatusName = '待结算'

      //TODO 操作按钮
      detail.operationBtns.push({
        title: `查看单据`,
        class: 'sure_@',
        type: 'default',
        fn: () => {
          onCheckBill(detail, BillOpeartionEm.SIGN.value, String(BillOpearStatusEm.SHIPMENT.value), 1, 0)
        }
      })

      if (detail.payStatus === PayStatusEm.NO_RECEIPT_PAY.value) {
        detail.billOrderSecStatusName = '未支付回单付'
        detail.secStatusColor = '#ff6459'
        // 未支付回单付
        detail.operationBtns.push({
          title: `回单支付`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            currentDetail.value = detail
            passwordPoppup.value = true
          }
        })
      } else if (detail.payStatus === PayStatusEm.NO_MONTH_PAY.value) {
        detail.billOrderSecStatusName = '未支付月结'
        detail.secStatusColor = '#ff6459'
        detail.operationBtns.push({
          title: `月结支付`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            currentDetail.value = detail
            passwordPoppup.value = true
          }
        })
      }
    }

    // 已完成
    const alreadyFinished = (detail: any): void => {
      // TODO 已完成状态此处显示付款时间（付款全部完成时间）
      detail.billOrderTime = `付款时间: ${changeDateType(detail.settleTime, 'YYMMDD')}`
      //TODO 当前状态.
      detail.billOrderStatusName = '已完成'
      if (detail.consToDriverStatus === CommentTypeEm.WAIT_EVALUATED.value) {
        // 待评价
        detail.billOrderSecStatusName = '待评价'
        detail.secStatusColor = '#FC9E29'
      } else if (detail.consToDriverStatus === CommentTypeEm.ALREADY_EVALUATED.value) {
        // 已评价
        detail.billOrderSecStatusName = '已评价'
        detail.secStatusColor = '#409EFF'
      }
      //TODO 操作按钮

      detail.operationBtns.push({
        title: `查看单据`,
        class: 'sure_2',
        type: 'default',
        fn: () => {
          onCheckBill(detail, BillOpeartionEm.SIGN.value, String(BillOpearStatusEm.SHIPMENT.value), 1, 0)
        }
      })

      if (detail.consToDriverStatus === 1) {
        detail.operationBtns.push({
          title: `评价司机`,
          class: 'sure',
          type: 'primary',
          fn: () => {
            onGoEvaluate(detail)
          }
        })
      }
    }

    // 已取消
    const alreadyCancel = (detail: any): void => {
      // TODO 已取消状态
      detail.billOrderTime = `取消时间: ${changeDateType(detail.updateTime, 'YYMMDD')}`

      // TODO 当前状态.
      detail.billOrderStatusName = '已取消'
    }

    // 已拒绝
    const alreadyReject = (detail: any) => {
      // TODO 已拒绝状态
      detail.billOrderTime = `拒绝时间: ${changeDateType(detail.updateTime, 'YYMMDD')}`

      // TODO 当前状态.
      detail.billOrderStatusName = '已拒绝'
    }

    // 重新构建数据
    const buildData = (list: any[]): any => {
      isFirstRequest.value = false
      state.isShowEmpty = true
      list.forEach(item => {
        item.operationBtns = [] // 创建空按钮数组
        for (let attr in BillAllStatusEm) {
          const billCurrentObj = BillAllStatusEm[attr]
          if (item.orderStatus) {
            // 订单
            if (billCurrentObj.value === item.orderStatus) {
              buildOrderData(item, billCurrentObj)
            }
          } else {
            buildTransData(item, billCurrentObj)
          }
        }
        if (item.billOrderStatus === BillAllStatusEm.WAIT_RE.value) {
          //TODO 待接单状态
          waitingList(item)
        } else if (item.billOrderStatus === BillAllStatusEm.FORWARDING.value) {
          //TODO 待装货状态
          forTheLoading(item)
        } else if (item.billOrderStatus === BillAllStatusEm.In_TRANSIT.value) {
          //TODO 运输中状态
          inTransit(item)
        } else if (item.billOrderStatus === BillAllStatusEm.TO_SIGNED.value) {
          //TODO 待签收状态
          waitingSign(item)
        } else if (item.billOrderStatus === BillAllStatusEm.SIGNED.value) {
          //TODO 待结算状态
          waitingBilling(item)
        } else if (item.billOrderStatus === BillAllStatusEm.FINISHED.value) {
          //TODO 已完成状态
          alreadyFinished(item)
        } else if (item.billOrderStatus === BillAllStatusEm.CANCELLED.value) {
          //TODO 已取消状态
          alreadyCancel(item)
        } else if (item.billOrderStatus === BillAllStatusEm.REJECT.value) {
          //TODO 已拒绝状态
          alreadyReject(item)
        }
      })
    }

    // 加载列表数据
    const onLoad = async (refresh = false): Promise<void> => {
      state.isShowEmpty = false
      const status = state.activeData.waybillStaus
      const params: any = {
        searchValue: state.activeData.searchVal,
        pageNo: state.initData.pageNo,
        pageSize: 10
      }
      let result: any = {}
      if (status === BillTabsEm.ALL.value) {
        result = await store.dispatch('waybill/handleGetWaybillAllList', params)
      } else if (status === BillTabsEm.WAIT_RE.value) {
        params.orderStatus = status
        result = await store.dispatch('waybill/handleGetOrderList', params)
      } else {
        params.status = status
        params.commentType = state.activeData.commentType
        result = await store.dispatch('waybill/handleGetWaybillList', params)
      }

      state.initData.totalRows = result.totalRows || 0
      const rows = result.rows || []
      buildData(rows)
      if (refresh) {
        state.initData.list = rows
      } else {
        state.initData.list = state.initData.list.concat(rows)
      }
      state.initData.isLoading = false
      state.initData.loading = false
      state.customLoading = false
      if (result.pageNo && params.pageNo * params.pageSize >= result.totalRows) {
        state.initData.finished = true
      } else {
        state.initData.pageNo += 1
      }
    }

    // 上拉刷新
    const onRefresh = () => {
      state.initData = { ...initData }
      onLoad(true)
    }

    // 搜索事件
    const onSearch = (): void => {
      state.initData = { ...initData }
      onLoad()
    }

    // tab点击事件
    const onTabClick = async (item: any): Promise<void> => {
      state.activeData.waybillStaus = item.name
      isFirstRequest.value = true
      onRefresh()
    }

    onMounted(() => {
      state.wrapper = document.getElementsByClassName('waybill-box')[0]
    })

    // Waybill组价的onActivated钩子
    onActivated(() => {
      if (state.scroll > 0 && state.wrapper) {
        state.wrapper.scrollTop = state.scroll
      }

      // isUseCache为false时才重新刷新获取数据
      // 使用keep-alive来缓存组件，所以默认是会使用缓存数据的
      if (!route.meta.isUseCache) {
        // 清空原有列表数据  //搜索,选择条件可以不变,此处选择刷新数据请求
        state.initData = { ...initData }
        // 开启自定义loading
        state.customLoading = true
        onLoad()
      } else {
        route.meta.isUseCache = false
        // 判断页面是否需要更新
        if (store.state.waybill.isRefresh) {
          store.commit('waybill/updateRefresh', false)
          onSearch()
        }
        // 判断页面是否需要跳转下一个tab项
        if (store.state.waybill.isNextTab) {
          store.commit('waybill/updateNextTab')
          state.activeData.active === 0 ? onSearch() : state.activeData.active++
        }
      }
    })

    //列表页面的onBeforeRouteLeave钩子函数,去除筛选条件,相对于刷新
    onBeforeRouteLeave((to, from, next) => {
      state.scroll = state.wrapper.scrollTop || 0
      if (to.name !== 'WaybillDetail' && to.name !== 'Receipt' && to.name !== 'Evaluate') {
        // 离开运单清除缓存
        store.commit('cachedView/clearCachedItem', { name: 'Waybill' })
      }
      next()
    })

    const {
      handleAssign,
      goTelphone,
      paymentOrder,
      handleConfirm,
      handleCancelOrder,
      onCheckBill,
      handleDetail,
      handleCopy,
      onGoEvaluate,
      handleEnterMap
    } = useListOperation(state, router, onSearch)

    return {
      ...toRefs(state),
      onSearch,
      onLoad,
      onTabClick,
      handleDetail,
      onCheckBill,
      onRefresh,
      handleCopy,
      handleCancelOrder,
      goTelphone,
      handleConfirm,
      handleAssign,
      paymentOrder,
      LoadReceiptStatusEm,
      UnloadReceiptStatusEm,
      LoadRejectStatusEm,
      UnloadRejectStatusEm,
      BillOpearStatusEm,
      BillTabsEm,
      DataTypeEm,
      PointTypeEm,
      PayStatusEm,
      BillOpeartionEm,
      SettleTypeEm,
      onGoEvaluate,
      onCommit,
      passwordPoppup,
      isFirstRequest
    }
  }
})
</script>

<style lang="scss" scoped src="./css/waybill.scss"></style>
